<template>
  <bm-overlay
    ref="customOverlay"
    class="sample"
    :class="active&&activeText==text?'activeText':''"
    pane="labelPane"
    @draw="draw"
  >
    <div class="myOverlay_warp" @click="choosePoint">
      <div class="myOverlay_div">{{text}}</div>
      <div class="myOverlay_div">{{areaNumber}}套</div>
    </div>
  </bm-overlay>
</template>

<script>
import { BmOverlay } from "vue-baidu-map";
export default {
  props: ["text", "position", "active", "activeText",'areaNumber'],
  components: {
    BmOverlay
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload(); // 当位置发生变化时，重新渲染，内部会调用draw
      },
      deep: true
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 这是百度地图的重绘函数,用于维持覆盖物的位置（这里的值貌似会影响拖拉时的偏移度）
    draw({ el, BMap, map }) {
      const { lng, lat } = this.position;
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x - 30 + "px";
      el.style.top = pixel.y - 30 + "px";
    },
    //
    choosePoint() {
      const { lng, lat } = this.position; 
      this.$emit("choosePoint", {
          lng:lng,
          lat:lat,
      }, true);
    }
  },
  watch: {}
};
</script>

<style scoped >
.activeText {
  background: rgba(0, 0, 0, 0.75) !important;
}
</style>